import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Image,
  View,
  Text,
  StatusBar
} from 'react-native';
import Dimensions from 'Dimensions';
import Swiper from 'react-native-swiper';
import Storage from 'react-native-storage';
import { AsyncStorage } from 'react-native';

import App from './app'
import Com from './Com'
import Welcomes from './WelcomeSwiper'
import TabView from './containers/TabView'
import css from './common/common_css'
import dp from './common/pxToDp'
export default class Welcome extends Component {
	constructor(props){
		super(props);
		this.state={
			isFirstImg:true
		}
	}
	//方法
	//跳转主页
	goToIndex(){
		const { navigator } = this.props;
		if(navigator){
			navigator.push({
				name:'Com',
				component:Com
			})
		}
	}
	componentWillMount(){
		console.log('123')
		//读取本地缓存判断是否首次打开app
		let storage=new Storage({
			size:1000,
			// 存储引擎：对于RN使用AsyncStorage，对于web使用window.localStorage
			// 如果不指定则数据只会保存在内存中，重启后即丢失
			storageBackend: AsyncStorage,
			defaultExpires:null,//数据过期时间  null永不过期
		})
		//先load，检测storage里面的isFirst值是否存在，如果存在则不是首次登陆，2秒后跳转到主页，否则save首次进入信息，并且2秒后切换到导航页
		storage.load({
			key:'isFirst'
		}).then(data=>{//如果有isFirst说明不是第一次登陆，2秒后跳主页
			setTimeout(()=>{
				this.goToIndex();
			},2000)
		}).catch(data=>{//没有isFirst,是第一次登陆
			//给storage存首次打开app状态
			storage.save({
				key:'isFirst',
				rawData:false,
			})
			//设置只执行一次的定时器
			setTimeout(()=>{
				//改变state状态
				this.setState({
					isFirstImg:false
				})
			},2000)
		})
	}
	//render控制2秒欢迎页与首次进入导航页的切换
  	render() {
		let showEl=null;
		if(this.state.isFirstImg){//如果isFirstImg为true，则显示欢迎页
			showEl= (
				<Image
					source={require('./image/welcome.png')}
					style={[s.windowFull]}
				/>
			);
		}else{
			showEl= (
				<Swiper>
					<View>
						<Image
							style={[s.windowFull]}
							source={require('./image/1.png')}
						>
							<View style={{position:'absolute',top:36,right:dp(18),backgroundColor:'#fadf6a',borderRadius:5}}>
								<View  style={[s.center,s.width50,s.height30]}>
									<Text onPress={ this.goToIndex.bind(this)}>跳过</Text>
								</View>
							</View>
						</Image>
					</View>
					<View>
						<Image
							style={[s.windowFull]}
							source={require('./image/1.png')}
						>
							<View style={{position:'absolute',top:36,right:dp(18),backgroundColor:'#fadf6a',borderRadius:5}}>
								<View  style={[s.center,s.width50,s.height30]}>
									<Text onPress={ this.goToIndex.bind(this)}>跳过</Text>
								</View>
							</View>
						</Image>
					</View>
					<View>
						<Image
							style={[s.windowFull]}
							source={require('./image/1.png')}
						>
							<View style={{position:'absolute',top:36,right:dp(18),backgroundColor:'#fadf6a',borderRadius:5}}>
								<View  style={[s.center,s.width50,s.height30]}>
									<Text onPress={ this.goToIndex.bind(this)}>跳过</Text>
								</View>
							</View>
						</Image>
					</View>
					<View>
						<Image
							style={[s.windowFull]}
							source={require('./image/1.png')}

						>
							<View style={{position:'absolute',top:36,right:dp(18),backgroundColor:'#fadf6a',borderRadius:5}}>
								<View  style={[s.center,s.width50,s.height30]}>
									<Text onPress={ this.goToIndex.bind(this)}>跳过</Text>
								</View>
							</View>
						</Image>
					</View>
				</Swiper>
			)
		}
		return(
			<View style={[s.flex1]}>
				<StatusBar
					hidden={true}
					animated={false}
				/>
				{showEl}
			</View>
		)
  	}
}

const s = StyleSheet.create(css);
